<template>
  <div>
    <el-drawer
      title="购物车"
      :visible.sync="$store.state.showcart"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="body customScroll" >
        <ul class="minicart-product-list">
          <li v-for="(item, index) in tableData" :key="index">
            <a
              href="single-product.html"
              class="image"
              style="margin-left: 20px"
              ><img :src="$store.state.imgURLPre+item.bookImages" alt="Cart product Image"
            /></a>
            <div class="content">
              <a href="single-product.html" class="title">{{
                item.bookTitle
              }}</a>
              <span class="quantity-price"
                >{{ item.cartAmount }} x
                <span class="amount">￥{{ item.bookNewPrice }}</span></span
              >
              <a  class="remove"
                ><el-popconfirm @confirm="del(item.id)" title="确定删除？">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    slot="reference"
                    style="margin-left: 10px"
                  ></el-button>
                </el-popconfirm>
              </a>
            </div>
          </li>
        </ul>
      </div>
      <div class="foot">
        <div class="sub-total">
          <table class="table">
            <tbody>
              <tr>
                <td class="text-left">小计 :</td>
                <td class="text-right">￥{{ totalPrice }}</td>
              </tr>

              <tr>
                <td class="text-left">邮费 :</td>
                <td class="text-right">￥0</td>
              </tr>
              <tr>
                <td class="text-left">总价 :</td>
                <td class="text-right theme-color">￥{{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="btn">
          <el-button type="primary" @click="toCart" style="margin-right: 20px"
            >查看购物车</el-button
          >
        </div>
        <p class="minicart-message">所有订单免费送货！！</p>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyBook";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "BookShopCart",

  components: {},

  directives: {},

  data() {
    return {
      user: {},
      direction: "rtl",
      tableData: [],
    };
  },
  created() {
    this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
    this.load();
  },
  mounted() {},
  watch: {
      //监听showcart的变化
    "$store.state.showcart": function () {
      if (this.$store.state.showcart === true) {
        this.load();
      }
    },
    
    
  },
  computed: {
    // 总价
    totalPrice() {
      var price_total = 0;
      for (var i = 0; i < this.tableData.length; i++) {
        price_total +=
          this.tableData[i].bookNewPrice * this.tableData[i].cartAmount;
      }
      return price_total;
    },
  },
  methods: {
    del(id){
        this.$store.commit('remove')
      API.delete(`/api/msslyyCart/${this.user.id}/${id}`).then((res) => {
        this.$message({
          type: "success",
          message: "删除成功"
        })
        this.load()
      });
    },
    load() {
        this.$store.commit('remove')
      API.get(url + "/getCartById/" + this.user.id, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.text,
        },
      }).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.records || [];
          //根据时间排序
          this.tableData.sort((a,b)=>b.addTime < a.addTime ? -1 : 1)
        } else {
          this.tableData = [];
        }
      });
    },
    toCart() {
      this.$router.push("/shop/cart");
      this.$store.commit("changeShowCart");
    },
    handleClose(done) {
      this.load();
      done();
    },
  },
};
</script>

<style  scoped>
.btn {
  width: 100%;
  display: flex;
  justify-content: end;
}
</style>